<template>
  <div class="box">
        <div class="box-row-1">
                <el-form :model="ruleform" ref="ruleForm">
                    <div class="box-form">
                        <el-form-item label="车间名称" class="displayClass" prop="mtName">
                            <el-input v-model="ruleform.mtName" placeholder="请输入车间名称"></el-input>
                        </el-form-item>
                        <el-form-item label="是否启用" class="displayClass" prop="State">
                            <el-select v-model="ruleform.State" placeholder="请选择是或否" clearable>
                                <el-option v-for="item in options" :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button class="el-button--mini" type="primary" icon="el-icon-search" @click="submitForm('ruleForm')">搜索</el-button>
                            <el-button class="el-button--mini" @click="resetForm('ruleForm')" icon="el-icon-refresh">重置</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </div>

        <div class="box-row-3">
            <el-table
            height='calc(100vh - 500px)'
            style="margin-bottom: 20px;"
            row-key="WORKSHOP_ID">
                <el-table-column prop="WORKSHOP_CODE" label="车间编号" width="300" align="center" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="WORKSHOP_NAME" label="车间名称" width="300" align="center" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="CHARGER" label="负责人" width="300" align="center" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="ENABLE_FLAG" label="是否启用" width="500" align="center">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.ENABLE_FLAG == 0 ? 'primary' : 'danger'" disable-transitions>
                                <div v-if="scope.row.ENABLE_FLAG == 0">是</div>
                                <div v-else>否</div>
                            </el-tag>
                        </template>
                </el-table-column>
                
                <el-table-column prop="CREATE_TIME" label="创建时间" width="300" align="center" :show-overflow-tooltip="true"></el-table-column>
                
            </el-table>
              <div class="box-row-3-pagination">
                    <Pagination  :pageindex="PageIndex" :pagesize="PageSize" :total="total"  @CurrentChange="CurrentChange" @SizeChange="SizeChange" />
            </div>
        </div>
    </div>
</template>

<script>
import Pagination from '../../../components/Pagination.vue'
export default {
    components:{
    Pagination
    },
    data(){
        return{
            options:[{
                    value: '0',
                    label: '是'
                },{
                    value:'1',
                    label:'否'
                }
            ],
             model:{
                WORKSHOP_CODE:'',
                enable_flag:'0',
            },
            ruleform:{
                WORKSHOP_CODE:'',
                enable_flag:''
            },
            tableData: [],
            isloading:false,
            PageIndex:1,//当前页数
            PageSize:10,//每页显示条数,
            total:0,//总条数
        }
    },
methods:{
    SelectChange(e){
        this.$emit('SelectChange',e)
    },
    submitForm(formName){
            this.$refs[formName].validate((valid)=>{
                if(valid){
                    this.dataBind();
                }else{
                    console.log('err')
                }
            })
        },
        SizeChange(e){
            this.PageSize = e;
            console.log('1');
            //从第一页开始
            this.PageIndex = 1;
            this.dataBind();
        },
        CurrentChange(e){
            console.log('1');
            this.PageIndex = e;
            this.dataBind();
        },
    resetForm(formName){
        this.$refs[formName].resetFields()
    },
    dataBind(){
            this.$http.request({
                type:'get',
                url:'/api/Equipmentledger',
                   
                params:{
                    PageIndex:this.PageIndex,
                    PageSize:this.PageSize,
                    mtName:this.ruleform.mtName,
                    enable_flag:this.ruleform.State,
                }
        }).then(res=>{
            console.log(res.data);
            if(res.data.code==200){
                this.tableData=res.data.data;
                 this.total = res.data.count;
            }
        }).catch(err=>{
            this.ShowMsg('服务器异常','error');
            console.log(err)
        }).finally(()=>{
            this.isloading=false;
        })
    },
},
created(){
    this.dataBind();
}
}
</script>

<style>
.box-form{
    display: flex;
    align-items: center;
}
.displayClass{
    display: flex;
    margin-right:15px;
}
</style>